<template>
  <div class="server-detail">
    <!-- 基本信息卡片 -->
    <div class="info-cards">
      <!-- 基本信息 -->
      <el-card class="basic-info-section">
        <template #header>
          <div class="card-header">
            <div class="left">
              <el-icon><Monitor /></el-icon>
              <h3>{{ server.hostname }}</h3>
              <div class="tags">
                <el-tag :type="getStatusType(server.status)" effect="light" size="small">
                  {{ getStatusText(server.status) }}
                </el-tag>
                <el-tag type="info" effect="plain" size="small"> ID: {{ server.id }} </el-tag>
              </div>
            </div>
            <div class="right">
              <el-tooltip content="编辑服务器" placement="top">
                <el-button type="primary" link @click="handleEdit">
                  <el-icon><Edit /></el-icon>
                  编辑
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除服务器" placement="top">
                <el-button type="danger" link @click="handleDelete">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </el-tooltip>
            </div>
          </div>
        </template>

        <div class="server-info">
          <div class="info-section">
            <div class="section-title">
              <el-icon><Platform /></el-icon>
              硬件信息
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">
                  <el-icon><Box /></el-icon>
                  品牌型号
                </span>
                <span class="value highlight"
                  >{{ server.server_brand }} {{ server.server_model }}</span
                >
              </div>
              <div class="info-item">
                <span class="label">
                  <el-icon><Document /></el-icon>
                  序列号
                </span>
                <span class="value monospace">{{ server.sn }}</span>
              </div>
              <div class="info-item">
                <span class="label">
                  <el-icon><Location /></el-icon>
                  机位
                </span>
                <span class="value">
                  {{ server.location }} U
                  <el-tag size="small" effect="plain" type="info" class="unit-tag">起始位置</el-tag>
                </span>
              </div>
              <div class="info-item">
                <span class="label">
                  <el-icon><ScaleToOriginal /></el-icon>
                  高度
                </span>
                <span class="value">
                  {{ server.height }} U
                  <el-tag size="small" effect="plain" type="info" class="unit-tag">单位高度</el-tag>
                </span>
              </div>
            </div>
          </div>

          <div class="info-section">
            <div class="section-title">
              <el-icon><Setting /></el-icon>
              管理信息
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">
                  <el-icon><Calendar /></el-icon>
                  采购日期
                </span>
                <span class="value">{{ formatDate(server.purchase_date) }}</span>
              </div>
              <div class="info-item">
                <span class="label">
                  <el-icon><Timer /></el-icon>
                  保修到期
                </span>
                <span class="value">
                  {{ formatDate(server.warranty_expiry) }}
                  <el-tag
                    v-if="isWarrantyExpired(server.warranty_expiry)"
                    size="small"
                    type="danger"
                    effect="light"
                    >已过期</el-tag
                  >
                </span>
              </div>
              <div class="info-item full-width">
                <span class="label">
                  <el-icon><Notebook /></el-icon>
                  备注
                </span>
                <span class="value description">{{ server.notes || '暂无备注' }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- BMC信息卡片 -->
      <el-card class="bmc-info-section">
        <template #header>
          <div class="card-header">
            <span class="title">
              <el-icon><Connection /></el-icon>
              BMC信息
            </span>
            <el-button v-if="!bmcInfo" type="primary" class="add-button" @click="handleAddBMC">
              <el-icon><Plus /></el-icon>
              <span>添加BMC</span>
            </el-button>
          </div>
        </template>

        <div v-loading="bmcLoading" class="bmc-info">
          <template v-if="bmcInfo">
            <div class="info-grid">
              <div class="info-item">
                <span class="label">
                  <el-icon><Monitor /></el-icon>
                  IP地址
                </span>
                <span class="value highlight">{{ bmcInfo.ip_address }}</span>
              </div>
              <div class="info-item">
                <span class="label">
                  <el-icon><Connection /></el-icon>
                  MAC地址
                </span>
                <span class="value monospace">{{ bmcInfo.mac_address }}</span>
              </div>
              <div class="info-item">
                <span class="label">
                  <el-icon><User /></el-icon>
                  用户名
                </span>
                <span class="value">{{ bmcInfo.username }}</span>
              </div>
              <div class="info-item">
                <span class="label">
                  <el-icon><InfoFilled /></el-icon>
                  固件版本
                </span>
                <span class="value">
                  {{ bmcInfo.firmware_version }}
                  <el-tag size="small" effect="plain" type="info">固件</el-tag>
                </span>
              </div>
            </div>
            <div class="actions">
              <el-button type="primary" link size="small" @click="handleEditBMC">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
            </div>
          </template>
          <el-empty v-else description="暂无BMC信息">
            <template #image>
              <el-icon :size="60" class="empty-icon"><Connection /></el-icon>
            </template>
          </el-empty>
        </div>
      </el-card>
    </div>

    <!-- 网卡信息部分 -->
    <el-card class="network-card-section">
      <template #header>
        <div class="card-header">
          <span class="title">
            <el-icon><Connection /></el-icon>
            网卡信息
          </span>
          <el-button type="primary" class="add-button" @click="handleAddCard">
            <el-icon><Plus /></el-icon>
            <span>添加网卡</span>
          </el-button>
        </div>
      </template>

      <div v-loading="loading" class="network-cards">
        <template v-if="networkCards.length > 0">
          <div v-for="card in networkCards" :key="card.id" class="network-card-item">
            <!-- 网卡基本信息 -->
            <div class="card-basic-info">
              <div class="info-header">
                <div class="left">
                  <span class="brand">{{ card.brand }}</span>
                  <span class="model">{{ card.model }}</span>
                  <el-tag size="small" effect="plain" class="type-tag">{{ card.type }}</el-tag>
                  <el-tag size="small" effect="plain" class="speed-tag">{{ card.speed }}</el-tag>
                </div>
                <div class="right">
                  <el-tag
                    :type="getStatusType(card.status)"
                    size="small"
                    effect="light"
                    class="status-tag"
                  >
                    {{ card.status }}
                  </el-tag>
                  <el-tag
                    :type="getHealthType(card.health_status)"
                    size="small"
                    effect="light"
                    class="health-tag"
                  >
                    {{ card.health_status }}
                  </el-tag>
                </div>
              </div>
              <div class="info-body">
                <div class="info-row">
                  <span class="label">MAC地址:</span>
                  <span class="value">{{ card.mac_address }}</span>
                </div>
                <div class="info-row">
                  <span class="label">序列号:</span>
                  <span class="value">{{ card.sn }}</span>
                </div>
              </div>
            </div>

            <!-- 网口信息 -->
            <div class="network-ports">
              <div class="ports-header">
                <span class="subtitle">
                  <el-icon><Connection /></el-icon>
                  网口信息
                </span>
                <el-button
                  type="primary"
                  link
                  size="small"
                  class="add-button"
                  @click="handleAddPort(card)"
                >
                  <el-icon><Plus /></el-icon>
                  <span>添加网口</span>
                </el-button>
              </div>

              <div class="ports-content">
                <template v-if="cardPorts[card.id]?.length">
                  <el-table :data="cardPorts[card.id]" size="small" style="width: 100%">
                    <el-table-column prop="ip_address" label="IP地址" min-width="120" />
                    <el-table-column prop="mac_address" label="MAC地址" min-width="140" />
                    <el-table-column prop="status" label="状态" width="100" align="center">
                      <template #default="{ row }">
                        <el-tag :type="getStatusType(row.status)" size="small">
                          {{ getStatusText(row.status) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                      <template #default="{ row }">
                        <el-button
                          type="primary"
                          link
                          size="small"
                          class="action-button"
                          @click="handleEditPort(row)"
                        >
                          <el-icon><Edit /></el-icon>
                          <span>编辑</span>
                        </el-button>
                        <el-button type="danger" link size="small" @click="handleDeletePort(row)">
                          <el-icon><Delete /></el-icon>
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
                <el-empty v-else description="暂无网口信息" />
              </div>
            </div>
          </div>
        </template>
        <div v-else class="empty-network-card">
          <el-empty description="暂无网卡信息" />
        </div>
      </div>
    </el-card>

    <!-- 添加网口对话框 -->
    <el-dialog
      v-model="portDialogVisible"
      title="添加网口"
      width="500px"
      :close-on-click-modal="false"
      @closed="resetPortForm"
    >
      <el-form
        ref="portFormRef"
        :model="portForm"
        :rules="portRules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="MAC地址" prop="mac_address">
          <el-input v-model="portForm.mac_address" placeholder="请输入MAC地址" />
        </el-form-item>
        <el-form-item label="IP地址" prop="ip_address">
          <el-input v-model="portForm.ip_address" placeholder="请输入IP地址" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="portForm.status" placeholder="请选择状态">
            <el-option label="活跃" value="active" />
            <el-option label="禁用" value="disabled" />
            <el-option label="故障" value="fault" />
            <el-option label="维护中" value="maintenance" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="portDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="portSubmitting" @click="handlePortSubmit">
          确认
        </el-button>
      </template>
    </el-dialog>

    <!-- 修改网口对话框 -->
    <el-dialog
      v-model="portEditDialogVisible"
      title="修改网口"
      width="500px"
      :close-on-click-modal="false"
      @closed="resetPortForm"
    >
      <el-form
        ref="portEditFormRef"
        :model="portForm"
        :rules="portRules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="MAC地址" prop="mac_address">
          <el-input v-model="portForm.mac_address" placeholder="请输入MAC地址" />
        </el-form-item>
        <el-form-item label="IP地址" prop="ip_address">
          <el-input v-model="portForm.ip_address" placeholder="请输入IP地址" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="portForm.status" placeholder="请选择状态">
            <el-option label="活跃" value="active" />
            <el-option label="禁用" value="disabled" />
            <el-option label="故障" value="fault" />
            <el-option label="维护中" value="maintenance" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="portEditDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="portSubmitting" @click="handlePortEditSubmit">
          确认
        </el-button>
      </template>
    </el-dialog>

    <!-- 添加网卡对话框 -->
    <el-dialog
      v-model="cardDialogVisible"
      title="添加网卡"
      width="500px"
      :close-on-click-modal="false"
      @closed="resetCardForm"
    >
      <el-form
        ref="cardFormRef"
        :model="cardForm"
        :rules="cardRules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="品牌" prop="brand">
          <el-input v-model="cardForm.brand" placeholder="请输入品牌" />
        </el-form-item>
        <el-form-item label="型号" prop="model">
          <el-input v-model="cardForm.model" placeholder="请输入型号" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="cardForm.type" placeholder="请选择类型">
            <el-option label="1GE" value="1GE" />
            <el-option label="10GE" value="10GE" />
            <el-option label="25GE" value="25GE" />
            <el-option label="40GE" value="40GE" />
            <el-option label="100GE" value="100GE" />
          </el-select>
        </el-form-item>
        <el-form-item label="速率" prop="speed">
          <el-select v-model="cardForm.speed" placeholder="请选择速率">
            <el-option label="1Gbps" value="1Gbps" />
            <el-option label="10Gbps" value="10Gbps" />
            <el-option label="25Gbps" value="25Gbps" />
            <el-option label="40Gbps" value="40Gbps" />
            <el-option label="100Gbps" value="100Gbps" />
          </el-select>
        </el-form-item>
        <el-form-item label="MAC地址" prop="mac_address">
          <el-input v-model="cardForm.mac_address" placeholder="请输入MAC地址" />
        </el-form-item>
        <el-form-item label="序列号" prop="sn">
          <el-input v-model="cardForm.sn" placeholder="请输入序列号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cardDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="cardSubmitting" @click="handleCardSubmit">
          确认
        </el-button>
      </template>
    </el-dialog>

    <!-- BMC表单 -->
    <BMCForm
      v-if="showBMCForm"
      v-model:visible="showBMCForm"
      :server-id="server.id"
      :bmc-info="bmcInfo"
      @success="handleBMCSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import {
  Connection,
  Refresh,
  Monitor,
  Edit,
  Delete,
  Platform,
  Box,
  Document,
  Location,
  ScaleToOriginal,
  Setting,
  Calendar,
  Timer,
  Notebook,
  Plus,
  User,
  InfoFilled,
} from '@element-plus/icons-vue'
import type { ServerInfo, NetworkCard, NetworkPort, BMCInfo } from '@/api/types'
import { assetService } from '@/api/assetService'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import BMCForm from './BMCForm.vue'

interface Props {
  server: ServerInfo
}

interface Emits {
  (e: 'edit', server: ServerInfo): void
  (e: 'delete', server: ServerInfo): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const networkCards = ref<NetworkCard[]>([])
const loading = ref(false)

// 存储每个网卡的网口信息
const cardPorts = reactive<Record<number, NetworkPort[]>>({})

// 网口表单相关
const portDialogVisible = ref(false)
const portEditDialogVisible = ref(false)
const portFormRef = ref<FormInstance>()
const portEditFormRef = ref<FormInstance>()
const portSubmitting = ref(false)
const currentCard = ref<NetworkCard>()
const editingPort = ref<NetworkPort>()

const portForm = reactive({
  mac_address: '',
  ip_address: '',
  status: 'active',
})

const portRules = {
  mac_address: [{ required: true, message: '请输入MAC地址', trigger: 'blur' }],
  ip_address: [
    { required: true, message: '请输入IP地址', trigger: 'blur' },
    { pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: 'IP地址格式不正确', trigger: 'blur' },
  ],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
}

// 网卡表单相关
const cardDialogVisible = ref(false)
const cardFormRef = ref<FormInstance>()
const cardSubmitting = ref(false)

const cardForm = reactive({
  brand: '',
  model: '',
  type: '',
  speed: '',
  mac_address: '',
  sn: '',
  status: 'active',
  health_status: 'good',
})

const cardRules = {
  brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
  model: [{ required: true, message: '请输入型号', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  speed: [{ required: true, message: '请选择速率', trigger: 'change' }],
  mac_address: [{ required: true, message: '请输入MAC地址', trigger: 'blur' }],
  sn: [{ required: true, message: '请输入序列号', trigger: 'blur' }],
}

// 格式化日期
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString()
}

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    online: 'success',
    offline: 'danger',
    undeployed: 'info',
    active: 'success',
    disabled: 'info',
    fault: 'danger',
  }
  return typeMap[status.toLowerCase()] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    online: '在线',
    offline: '离线',
    undeployed: '未部署',
    active: '活跃',
    disabled: '禁用',
    fault: '故障',
  }
  return textMap[status.toLowerCase()] || status
}

// 获取健康状态对应的类型
const getHealthType = (health: string) => {
  const typeMap: Record<string, string> = {
    good: 'success',
    warning: 'warning',
    error: 'danger',
  }
  return typeMap[health.toLowerCase()] || 'info'
}

// 处理编辑
const handleEdit = () => {
  emit('edit', props.server)
}

// 处理删除
const handleDelete = () => {
  emit('delete', props.server)
}

// 加载网口信息
const loadNetworkPorts = async (networkCardId: number) => {
  try {
    const ports = await assetService.getNetworkPorts(networkCardId)
    cardPorts[networkCardId] = ports
  } catch (error) {
    console.error('Failed to load network ports:', error)
  }
}

// 加载网卡信息时同时加载网口信息
const loadNetworkCards = async () => {
  loading.value = true
  try {
    networkCards.value = await assetService.getServerNetworkCards(props.server.id)
    // 为每个网卡加载网口信息
    await Promise.all(networkCards.value.map((card) => loadNetworkPorts(card.id)))
  } catch (error) {
    console.error('Failed to load network cards:', error)
  } finally {
    loading.value = false
  }
}

// 检查保修是否过期
const isWarrantyExpired = (date: string) => {
  return new Date(date) < new Date()
}

// 处理添加网口
const handleAddPort = (card: NetworkCard) => {
  currentCard.value = card
  portForm.mac_address = ''
  portForm.ip_address = ''
  portForm.status = 'active'
  portDialogVisible.value = true
}

// 处理编辑网口
const handleEditPort = (port: NetworkPort) => {
  editingPort.value = port
  currentCard.value = networkCards.value.find((card) => card.id === port.network_card_id) || null
  portForm.mac_address = port.mac_address
  portForm.ip_address = port.ip_address
  portForm.status = port.status
  portEditDialogVisible.value = true
}

// 处理删除网口
const handleDeletePort = async (port: NetworkPort) => {
  try {
    await ElMessageBox.confirm('确认删除该网口吗？', '提示', {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    })

    await assetService.deleteNetworkPort(port.id)
    ElMessage.success('删除网口成功')
    // 重新加载网口信息
    if (port.network_card_id) {
      await loadNetworkPorts(port.network_card_id)
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Failed to delete network port:', error)
      ElMessage.error('删除网口失败')
    }
  }
}

// 提交添加表单
const handlePortSubmit = async () => {
  if (!portFormRef.value || !currentCard.value) return

  await portFormRef.value.validate(async (valid) => {
    if (valid) {
      portSubmitting.value = true
      try {
        await assetService.createNetworkPort({
          server_id: props.server.id,
          network_card_id: currentCard.value.id,
          mac_address: portForm.mac_address,
          ip_address: portForm.ip_address,
          status: portForm.status,
        })
        ElMessage.success('添加网口成功')
        portDialogVisible.value = false
        // 重新加载网口信息
        await loadNetworkPorts(currentCard.value.id)
      } catch (error) {
        console.error('Failed to create network port:', error)
        ElMessage.error('添加网口失败')
      } finally {
        portSubmitting.value = false
      }
    }
  })
}

// 提交编辑表单
const handlePortEditSubmit = async () => {
  if (!portEditFormRef.value || !editingPort.value || !currentCard.value) return

  await portEditFormRef.value.validate(async (valid) => {
    if (valid) {
      portSubmitting.value = true
      try {
        await assetService.updateNetworkPort({
          id: editingPort.value.id,
          server_id: props.server.id,
          network_card_id: currentCard.value.id,
          mac_address: portForm.mac_address,
          ip_address: portForm.ip_address,
          status: portForm.status,
        })
        ElMessage.success('修改网口成功')
        portEditDialogVisible.value = false
        // 重新加载网口信息
        await loadNetworkPorts(currentCard.value.id)
      } catch (error) {
        console.error('Failed to update network port:', error)
        ElMessage.error('修改网口失败')
      } finally {
        portSubmitting.value = false
      }
    }
  })
}

// 重置表单
const resetPortForm = () => {
  portForm.mac_address = ''
  portForm.ip_address = ''
  portForm.status = 'active'
  currentCard.value = undefined
  editingPort.value = undefined
  if (portFormRef.value) {
    portFormRef.value.resetFields()
  }
  if (portEditFormRef.value) {
    portEditFormRef.value.resetFields()
  }
}

// 处理添加网卡
const handleAddCard = () => {
  cardDialogVisible.value = true
}

// 重置网卡表单
const resetCardForm = () => {
  cardForm.brand = ''
  cardForm.model = ''
  cardForm.type = ''
  cardForm.speed = ''
  cardForm.mac_address = ''
  cardForm.sn = ''
  if (cardFormRef.value) {
    cardFormRef.value.resetFields()
  }
}

// 提交网卡表单
const handleCardSubmit = async () => {
  if (!cardFormRef.value) return

  await cardFormRef.value.validate(async (valid) => {
    if (valid) {
      cardSubmitting.value = true
      try {
        await assetService.createNetworkCard({
          server_id: props.server.id,
          ...cardForm,
        })
        ElMessage.success('添加网卡成功')
        cardDialogVisible.value = false
        // 重新加载网卡列表
        await loadNetworkCards()
      } catch (error) {
        console.error('Failed to create network card:', error)
        ElMessage.error('添加网卡失败')
      } finally {
        cardSubmitting.value = false
      }
    }
  })
}

// BMC相关
const bmcInfo = ref<BMCInfo>()
const bmcLoading = ref(false)
const showBMCForm = ref(false)

// 加载BMC信息
const loadBMCInfo = async () => {
  bmcLoading.value = true
  try {
    bmcInfo.value = await assetService.getBMCInfo(props.server.id)
  } catch (error) {
    console.error('Failed to load BMC info:', error)
    bmcInfo.value = undefined
  } finally {
    bmcLoading.value = false
  }
}

// 处理添加BMC
const handleAddBMC = () => {
  showBMCForm.value = true
}

// BMC添加成功处理
const handleBMCSuccess = () => {
  loadBMCInfo()
  showBMCForm.value = false
  ElMessage.success('BMC信息添加成功')
}

// 处理编辑BMC
const handleEditBMC = () => {
  if (bmcInfo.value) {
    showBMCForm.value = true
  }
}

onMounted(() => {
  loadBMCInfo()
  loadNetworkCards()
})
</script>

<style scoped lang="scss">
.server-detail {
  .info-cards {
    display: grid;
    grid-template-columns: 2fr 1fr; // 基本信息占2份，BMC信息占1份
    gap: 16px;
    margin-bottom: 16px;
  }

  .basic-info-section {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        align-items: center;
        gap: 12px;

        .el-icon {
          font-size: 20px;
          color: var(--el-color-primary);
        }

        h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 500;
          color: var(--el-text-color-primary);
        }

        .tags {
          display: flex;
          gap: 8px;
          align-items: center;
        }
      }

      .right {
        display: flex;
        gap: 8px;

        .el-button {
          display: inline-flex;
          align-items: center;
          gap: 4px;

          .el-icon {
            font-size: 14px;
          }
        }
      }
    }

    .server-info {
      .info-section {
        &:not(:last-child) {
          margin-bottom: 24px;
        }

        .section-title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          font-weight: 500;
          color: var(--el-text-color-primary);
          margin-bottom: 16px;
          padding-bottom: 8px;
          border-bottom: 1px solid var(--el-border-color-lighter);

          .el-icon {
            font-size: 16px;
            color: var(--el-color-primary);
          }
        }

        .info-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;

          .info-item {
            display: flex;
            flex-direction: column;
            gap: 4px;

            &.full-width {
              grid-column: 1 / -1;
            }

            .label {
              display: flex;
              align-items: center;
              gap: 6px;

              .el-icon {
                font-size: 14px;
                color: var(--el-text-color-secondary);
              }
            }

            .value {
              display: flex;
              align-items: center;
              gap: 8px;

              &.highlight {
                color: var(--el-color-primary);
                font-weight: 500;
              }

              &.monospace {
                font-family: var(--el-font-family-monospace);
                letter-spacing: 0.5px;
              }

              &.description {
                line-height: 1.5;
                color: var(--el-text-color-regular);
                font-size: 13px;
              }

              .unit-tag {
                font-size: 12px;
                padding: 0 6px;
                height: 20px;
                line-height: 18px;
              }
            }
          }
        }
      }
    }
  }

  .bmc-info-section {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 500;

        .el-icon {
          font-size: 18px;
          color: var(--el-color-primary);
        }
      }

      .add-button {
        display: inline-flex;
        align-items: center;
        gap: 4px;

        .el-icon {
          margin: 0;
        }
      }
    }

    .bmc-info {
      min-height: 200px;
      padding: 16px;

      .info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 16px;

        .info-item {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .label {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--el-text-color-secondary);
            font-size: 13px;

            .el-icon {
              font-size: 14px;
              color: var(--el-text-color-secondary);
            }
          }

          .value {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--el-text-color-primary);
            font-size: 14px;

            &.highlight {
              color: var(--el-color-primary);
              font-weight: 500;
            }

            &.monospace {
              font-family: var(--el-font-family-monospace);
              letter-spacing: 0.5px;
            }

            .el-tag {
              font-size: 12px;
              padding: 0 6px;
              height: 20px;
              line-height: 18px;
            }
          }
        }
      }

      .actions {
        display: flex;
        justify-content: flex-end;
        padding-top: 16px;
        border-top: 1px solid var(--el-border-color-lighter);

        .el-button {
          display: inline-flex;
          align-items: center;
          gap: 4px;

          .el-icon {
            font-size: 14px;
          }
        }
      }

      :deep(.el-empty) {
        padding: 32px 0;

        .empty-icon {
          color: var(--el-text-color-placeholder);
        }
      }
    }
  }

  .network-card-section {
    margin-top: 16px;
    position: relative;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 500;

        .el-icon {
          font-size: 18px;
          color: var(--el-color-primary);
        }
      }

      .el-button {
        margin-left: auto;
      }
    }

    .network-cards {
      .network-card-item {
        background: var(--el-bg-color);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

        &:not(:last-child) {
          margin-bottom: 16px;
        }

        .card-basic-info {
          padding: 16px;
          background: var(--el-fill-color-light);

          .info-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            .left {
              display: flex;
              align-items: center;
              gap: 8px;

              .brand {
                font-weight: 500;
                font-size: 15px;
                color: var(--el-text-color-primary);
              }

              .model {
                color: var(--el-text-color-regular);
                font-size: 14px;
              }

              .type-tag {
                background-color: var(--el-color-primary-light-9);
                border-color: var(--el-color-primary-light-5);
                color: var(--el-color-primary);
              }

              .speed-tag {
                background-color: var(--el-color-success-light-9);
                border-color: var(--el-color-success-light-5);
                color: var(--el-color-success);
              }
            }

            .right {
              display: flex;
              gap: 8px;

              .status-tag,
              .health-tag {
                min-width: 64px;
                justify-content: center;
                text-transform: capitalize;
              }
            }
          }

          .info-body {
            display: flex;
            gap: 24px;

            .info-row {
              display: flex;
              align-items: center;
              gap: 8px;

              .label {
                color: var(--el-text-color-secondary);
                font-size: 13px;
              }

              .value {
                color: var(--el-text-color-primary);
                font-family: var(--el-font-family-monospace);
                font-size: 13px;
              }
            }
          }
        }

        .network-ports {
          border-top: 1px solid var(--el-border-color-lighter);
          margin-top: 0;
          background-color: var(--el-bg-color);

          .ports-header {
            padding: 12px 16px;
            margin-bottom: 0;
            background-color: var(--el-fill-color-blank);
          }

          .ports-content {
            padding: 0 16px 16px;
          }
        }
      }
    }

    .empty-network-card {
      padding: 40px 0;
    }

    .add-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 0 12px;
      height: 28px;

      .el-icon {
        margin: 0;
      }

      span {
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
      }
    }

    // 修改按钮样式
    .action-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 24px;
      padding: 0 8px;

      .el-icon {
        margin: 0;
        font-size: 14px;
      }

      span {
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  // 表格内的操作按钮样式
  :deep(.el-table) {
    .el-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 24px;
      padding: 0 8px;

      .el-icon {
        margin: 0;
        font-size: 14px;
      }

      span {
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}

// 对话框按钮样式
:deep(.el-dialog__footer) {
  .el-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    .el-icon {
      margin: 0;
    }

    span {
      line-height: 1;
    }
  }
}
</style>
